<template>
	<div class="tabcontrol">
	<div class="tabcontrol-item" v-for="(item,index) in tabtexts"
	 :class="{active:currentIndex === index}" @click="tabclick(index,item.type)">
		<div><span>{{item.text}}</span></div>
	</div>
	</div>
</template>

<script>
	
	export default {
		name:"TabControl",
		props:{
			tabtexts:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				currentIndex:0
			}
		},
		methods:{
			tabclick(index,type){
				this.currentIndex = index
				this.$emit("tabclick",type)
			}
		}
	}
</script>

<style scoped>
	.tabcontrol{
		display: flex;
		text-align: center;
		height:50px;
		line-height:50px;
		background-color: #fff;
	}
	.tabcontrol-item{
		flex:1;
	}
	.tabcontrol-item span{
		border-bottom: solid 1px;
		padding-bottom: 8px;
	}
	
	.active{
		color:#FF5777;
	}
</style>
